<template>
  <div class="detail">
    <h3>{{ product.name }}</h3>
    <div class="content" v-html="product.content"></div>
    <van-goods-action>
      <van-goods-action-icon icon="home-o" text="首页" @click="onClickIcon('Home')" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon('Cart')" />
      <van-goods-action-icon icon="bag-o" text="热卖" @click="onClickIcon('List')" />
      <van-goods-action-button
        type="danger"
        text="加入购物车"
        @click="byHandle"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { Notify } from 'vant';
import { loadPductDetail } from "../services/producs";
import {addToCarAPI} from "../services/carts"
export default {
  data() {
    return {
      product: {},
    };
  },
  async created() {
    const res = await loadPductDetail(this.$route.query.id);
    this.product = res.data;
  },
  methods: {
      onClickIcon(name){
          this.$router.push({
              name
          })
      },
      async byHandle(){
          const res=await addToCarAPI(this.product.id,1,this.product.price)
         if(res.code===1){
          Notify({ type:"success", message:res.msg});
           this.$router.push({
             name:"Cart"
           })
         }else{
            Notify({ type: 'warning', message:res.data });
         }
      }

  },
};
</script>

<style>
</style>
